<template>
  <div>
    <el-table :data="this.posts.slice((currentPage - 1) * 10, currentPage * 10)"
              stripe
              size="mini">
      <el-table-column label="标题">
        <template slot-scope="scope">
          <router-link :to="{path: '/post', query:{id: scope.row.postID, title: scope.row.postTitle, announcement: isAnnouncement}}">{{scope.row.postTitle}}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="postTime"
                       label="发布时间">
      </el-table-column>
      <el-table-column prop="userName"
                       label="发帖人"
                       v-if="isAnnouncement === 0">
      </el-table-column>
      <el-table-column prop="lastTime"
                       label="最后回复时间"
                       v-if="isAnnouncement === 0">
      </el-table-column>
      <el-table-column prop="replyNum"
                       label="回复数"
                       v-if="isAnnouncement === 0">
      </el-table-column>
    </el-table>
    <el-pagination @current-change="currentChange"
                   :current-page="currentPage"
                   :page-size="10"
                   layout="total, prev, pager, next, jumper"
                   :total="posts.length"
                   :hide-on-single-page="true">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'PostList',
  props: {
    posts: Array,
    isAnnouncement: Number
  },
  data () {
    return {
      currentPage: 1
    }
  },
  methods: {
    currentChange (page) {
      this.currentPage = page
      window.scrollTo(0, 0)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
